<template>
  <page-header-wrapper>
    <a-card :bordered="false">

      <div class="table-page-search-wrapper">
        <!-- <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="状态">
                <a-select v-model="status" placeholder="请选择医生状态">
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">审核中</a-select-option>
                  <a-select-option :value="2">审核通过</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
            </a-col>
          </a-row>
        </a-form> -->
        <a-tabs v-model:activeKey="status" @change="changeStatus">
          <a-tab-pane key="0" tab="全部"></a-tab-pane>
          <a-tab-pane key="1" tab="申请中" force-render></a-tab-pane>
          <a-tab-pane key="2" tab="已完成"></a-tab-pane>
          <a-tab-pane key="3" tab="已拒绝"></a-tab-pane>
        </a-tabs>
      </div>
      <a-table :scroll="{ x: true }" ref="table" @change="tablePaginationChange" :pagination="pagination" bordered
        :dataSource="dataSource" :columns="columns" :rowKey="(record,index)=> index">
        <img @click="previewImg(record.logo)" class="banner-img" slot-scope="text, record" :src="record.logo"
          slot="logo" />

        <div slot="alipay" slot-scope="text, record" href="javascript:;">
          {{text}} 元
        </div>
        <div slot="alipay" slot-scope="text, record" href="javascript:;">
          {{record.Bank.alipay==''?'银行卡':'支付宝'}}
        </div>
        <div slot="bank" slot-scope="text, record" href="javascript:;">
          {{record.Bank.alipay==''?record.Bank.khh +' '+  record.Bank.bank:record.Bank.alipay}}
        </div>
        <div slot="name" slot-scope="text, record" href="javascript:;">
          {{record.Bank.alipay==''?record.Bank.name:'-'}}
        </div>
        <div slot="phone" slot-scope="text, record" href="javascript:;">
          {{record.Bank.alipay==''?record.Bank.phone:'-'}}
        </div>
        <div slot="phone" slot-scope="text, record" href="javascript:;">
          {{record.Bank.alipay==''?record.Bank.phone:'-'}}
        </div>
        <span slot="addtime" slot-scope="text">
          <span>{{ new Date(text * 1000).toLocaleString() }}</span>
        </span>

        <div slot="status" slot-scope="text, record" href="javascript:;">
          <a-tag color="blue" v-if="record.state==1">申请中</a-tag>
          <a-tag color="green" v-else-if="record.state==2">已完成</a-tag>
          <a-tag v-else-if="record.state==3">已拒绝</a-tag>
        </div>

        <div slot="action" slot-scope="text, record" href="javascript:;">
          <a-popconfirm v-if="record.state==1" title="是否要通过审核？" @confirm="authInfo(record,2)">
            <a-button size='small' type="link">
              通过审核
            </a-button>
          </a-popconfirm>
          <a-popconfirm v-if="record.state==1" title="是否拒绝通过审核？" @confirm="authInfo(record,3)">
            <a-button size='small' type="link" style="color: red;">
              拒绝通过
            </a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </a-card>
    <imgBox ref='preimg'></imgBox>

    <a-modal :title="edittype=='zhenfei'?'修改诊金指数':'修改中药指数'" :visible="pricevisible" @ok="updatePrice"
      @cancel="()=>{pricevisible=false}">
      <a-form :form="priceform">
        <a-form-item :title="edittype=='zhenfei'?'诊金指数':'中药指数'">
          <a-input v-decorator="['zhenfeibl',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>

</template>

<script>
  import {
    STable,
    Ellipsis,
  } from '@/components'
  import {
    withDrawList,
    checkWithdraw,
  } from '@/api/wallet'
  import imgBox from '@/components/previewImg/index'

  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    createVNode
  } from 'vue';
  import {
    Modal,
    message
  } from 'ant-design-vue';

  export default {
    components: {
      STable,
      Ellipsis,
      imgBox
    },
    data() {
      return {
        priceform: this.$form.createForm(this),
        pricevisible: false, //修改诊金指数
        searchflag: false,
        shenhe: 0, //审核
        status: '0', //状态
        addFlag: false,
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        dataSource: [],
        columns: [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 70,
          },
          // {
          //   title: 'logo',
          //   key: 'logo',
          //   dataIndex: 'logo',
          //   width: 100,
          //   scopedSlots: {
          //     customRender: 'logo'
          //   }
          // },

          {
            title: '医生ID',
            dataIndex: 'doctorid',
            key: 'doctorid',
            ellipsis: true,
          },
          {
            title: '提现金额',
            dataIndex: 'price',
            key: 'price',
            scopedSlots: {
              customRender: 'price'
            }
          },
          {
            title: '账户类型',
            dataIndex: 'alipay',
            key: 'alipay',
            scopedSlots: {
              customRender: 'alipay'
            }
          },
          {
            title: '提现账户',
            dataIndex: 'bank',
            key: 'bank',
            scopedSlots: {
              customRender: 'bank'
            }
          },
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            scopedSlots: {
              customRender: 'name'
            }
          },
          {
            title: '预留手机号',
            dataIndex: 'phone',
            key: 'phone',
            scopedSlots: {
              customRender: 'phone'
            }
          },
          {
            title: '申请时间',
            dataIndex: 'addtime',
            key: 'addtime',
            scopedSlots: {
              customRender: 'addtime'
            }
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            fixed: 'right',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        curdoc: 0,
        edittype: '', //修改类型
      }
    },
    created() {
      this.getList()
    },
    methods: {
      changeStatus() {
        this.pagination.current = 1
        this.getList()
      },
      // 修改诊金
      updatePrice() {
        var that = this
        const {
          priceform: {
            validateFields
          },
        } = this

        validateFields((errors, values) => {
          if (!errors) {
            values.id = this.curdoc
            if (this.edittype == 'zhenfei') {
              values.zhenfeibl = parseInt(values.zhenfeibl)
              doctorPriceSet({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  this.pricevisible = false
                  this.getList()
                }
              })
            } else {
              values.zhongyaobl = parseInt(values.zhenfeibl)
              doctorZhongyaoSet({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  this.pricevisible = false
                  this.getList()
                }
              })
            }
          }
        })
      },
      editPrice(val, edittype) {
        this.curdoc = val.id
        this.edittype = edittype
        this.pricevisible = true
        setTimeout(() => {
          this.priceform.setFieldsValue({
            zhenfeibl: edittype == 'zhenfei' ? val.zhenfeibl : val.zhongyaobl
          })
        }, 500)
      },
      authInfo(val, state) {
        checkWithdraw({
          id: val.id,
          state: state
        }).then(res => {
          message.info('操作成功');
          this.getList(0)
        })
      },
      previewImg(img) {
        this.$refs.preimg.initData(img)
      },
      getList() {
        withDrawList({
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          state: this.status * 1
        }).then(res => {
          this.pagination.total = res.data.totalCount
          this.dataSource = res.data.data
        })
      },
      handleSearch() {
        this.searchflag = true
        this.pagination.current = 1
        this.getList()
      },
      resetSearch() {
        this.searchflag = false
        this.status = '0'
        this.pagination.current = 1
        this.getList()
      },
      updateInfo(val) {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.setUpdate(val)
        })
      },

      addCancel() {
        this.addFlag = false
      },
      AddSuccess() {
        this.addFlag = false
        this.getList()
      },
      addStore() {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.updateflag = false
        })
      },
      tablePaginationChange(e) {
        this.pagination = e
        this.getList()
      },
      getDate(stamp) {
        var date = new Date(stamp * 1000)
        return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date
          .getMonth() +
          1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      },
      deletInfo(val) {
        hospitalDelet(val.id).then(res => {
          this.getList()
        })
      }
    }
  }
</script>
<style scoped>
  .banner-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>